<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="/js/sprite-core.js"></script>
  <script>
    const {stylesheet, Sprite, BaseNode, Group} = spritejs;
    const rules = {
      'group > sprite': {
        x: 200,
      },
      'group > sprite:not(.foo)': {
        x: 100,
      },
    };
    stylesheet.add(rules);

    const group = new Group();
    for(let i = 0; i < 5; i++) {
      const s = new Sprite();
      if(i % 2) s.className = 'foo';
      group.append(s);
      stylesheet.computeStyle(s);
    }
  </script>
</body>
</html>